﻿@model chihuopig.DTO.ReturnJson
@{
    ViewBag.WebTitle = "首页";
}
@section Header
{ 
    <link  rel="stylesheet" href="~/css/HomeIndex.css" />
<link href="https://i1.douguo.com/static/wap/css/global.css?v=0224" charset="UTF-8" rel="stylesheet" type="text/css" />
<script type='text/javascript' src='https://i1.douguo.com/static/wap/js/jquery-2.1.4.min.js'></script>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script type='text/javascript' src='https://i1.douguo.com/static/wap/js/swiper.min.js'></script>
}

<style>
    iframe#jialiang{display: none;}
</style>


<div id="top2" style="width: 100%;height: 60px;border-bottom: 1px solid #f3f2f0;z-index: 999;background: #fdfcfc;position: fixed;top: 0;left: 0;display:none">  
            <a href="http://dwz.cn/6SPIfp" style="width:100%;height: 60px;display: block;" class="wxTop"> 
            <i class="xzlogo" style="left:22px"></i>
            <p class="gettittle" style="left:74px">给我鸡蛋和面粉，<span>我能连吃一个月不重样！</span></p>
            <span class="getapp" style="width:70px">查看详情</span>
        </a>  
</div>
<div class="tbox" style="display: none"></div>

<div class="header clearfix">
    <div class="getsearch" style="margin: 11px 0px 0px 0px;">
        <input type="search" placeholder="搜索菜谱、食材"/>
    </div>
        <a href="/main/usercenter?f=www" class="icuser"></a>
    </div>
<div class="ftop">
    <a href="javascript:void(0);" class="ptop" onclick="window.scroll(0,0);" ><i class="icon_top"></i>顶部</a>
</div>

<div class="plr10">
    <div class="swiper-container">
        <div class="swiper-wrapper  clearfix">
                <div class="banner-slide swiper-slide">
                    <a href="/cookbook/1654089.html?f=www" class="slidebox">
                        <img src="https://cp1.douguo.com/upload/caiku/9/9/1/400x300_99a5fca41a4a59460bddb1a28e0a8061.jpg" class="wb100"/>
                        <div class="slidenews">
                            <img src="https://i1.douguo.com/upload/photo/c/a/3/70_u0809295571808004131731.jpg"/>
                            <p>颠覆经典的零失败苹果克拉芙缇</p>
                            <p class="pname">模样生活</p>
                        </div>
                    </a>
                </div>
                <div class="banner-slide swiper-slide">
                    <a href="/cookbook/1654072.html?f=www" class="slidebox">
                        <img src="https://cp1.douguo.com/upload/caiku/a/e/d/400x300_ae7693658a6d3db3fc5548294612aded.jpeg" class="wb100"/>
                        <div class="slidenews">
                            <img src="https://i1.douguo.com/upload/photo/a/e/7/70_u78747662536190112507.jpeg"/>
                            <p>凤梨柠檬酥菠萝</p>
                            <p class="pname">亮叔的爱食记</p>
                        </div>
                    </a>
                </div>
                <div class="banner-slide swiper-slide">
                    <a href="/cookbook/1654092.html?f=www" class="slidebox">
                        <img src="https://cp1.douguo.com/upload/caiku/9/e/7/400x300_9e5a52f7eac8c72eb385effe629134e7.jpeg" class="wb100"/>
                        <div class="slidenews">
                            <img src="https://i1.douguo.com/upload/photo/2/e/8/70_u16463981608917173524.jpeg"/>
                            <p>薯条造型馒头</p>
                            <p class="pname">honey啊清清</p>
                        </div>
                    </a>
                </div>
                <div class="banner-slide swiper-slide">
                <a href="/cookbook/1653936.html?f=www" class="slidebox">
                    <img src="https://cp1.douguo.com/upload/caiku/5/6/4/400x300_56c06db92da64d528c863f04c368ac24.JPG" class="wb100"/>
                    <div class="slidenews">
                        <img src="https://i1.douguo.com/upload/photo/c/2/6/70_u93917763884583010959.jpeg"/>
                        <p>龙猫戚风</p>
                        <p class="pname">格子07</p>
                    </div>
                </a>
            </div>
        </div>        
        <div class="swiper-pagination">

        </div>
      </div>
</div>



<div class="bff clearfix mlr10 mb10" id="main">
    <p style='width: 40%;margin:auto'>
        <img src="https://i1.douguo.com/static/wap/img/title_like.png" alt="主题文章" class='wb100'/>
    </p>
    <div class="clearfix list" id="demo">
        <a class="left relative" v-for="s in list" v-bind:href="showhersMe(s.Page)">
            <img class="wb100"  v-bind:src="s.Imgsrc" v-bind:alt="s.Title"/>
            <p>{{s.Title}}</p>
        </a><!--/html/Web/home/''.shtml-->
      
      </div>
</div>


<div id="btmPop"></div>
<div style="position: relative;width:100%;background-color:#fff;padding-top:20px;margin-bottom:55px;display:none" class="gzh">
    <a href="?f=www" style="position: absolute;top: 0;left: 0;right: 11rem;bottom: 0;"></a>
    <img class="gzimg" src="" style="width:100%">
</div>


@section Scripts{ 
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
    var vm = new Vue({
        el: '#main',
        data:
        {
            list:@Html.Raw(Model.Data),
            total:@Html.Raw(Model.Total),
        },
        methods:
        {
            showhersMe: function (e) {

                return '/html/Web/home/index/' + e;
            }
        }
    })

    layui.use('flow', function () {
        var $ = layui.jquery; //不用额外加载jQuery，flow模块本身是有依赖jQuery的，直接用即可。
        var flow = layui.flow;
        flow.load({
            elem: '#demo' //指定列表容器
            , done: function (page, next) { //到达临界点（默认滚动触发），触发下一页
                var lis = [];
                //以jQuery的Ajax请求为例，请求下一页数据（注意：page是从2开始返回）
                $.get('/Web/Home/Index?IsAjax=true&pageIndex=' + (page+1), function (res) {
                    //假设你的列表返回在data集合中
                    var html = '';
                    layui.each(res.data, function (index, item)
                    {
                        html += '<a class="left relative" href="' + item.page + '">';
                        html += '  <img class="wb100" rc="' + item.Imgsrc + '" alt="' + item.Title +'"/>';
                        html += ' <p>' + item.Title+'</p>';
                        html += '</a>';
                    });
                    lis.push(html);

                    //执行下一页渲染，第二参数为：满足“加载更多”的条件，即后面仍有分页
                    //pages为Ajax返回的总页数，只有当前页小于总页数的情况下，才会继续出现加载更多
                    next(lis.join(''), page < vm.total);
                });
            }
        });
    });
    var swiper = new Swiper('.swiper-container', {
        pagination: '.swiper-pagination',
        paginationClickable: true,
        loop: true,
        autoplay: 5000,
    });

   
    $(function () {
       
       /* var banner = new Swiper('.banner',{
            autoplay: 5000,
            pagination : '.swiper-pagination',
            paginationClickable: true,
            lazyLoading : true,
            loop:true
        });*/
        
         mui('.pop-schwrap .sch-input').input();
        var deceleration = mui.os.ios?0.003:0.0009;
         mui('.pop-schwrap .scroll-wrap').scroll({
                bounce: true,
                indicators: true,
                deceleration:deceleration
        });
        $('.top-sch-box .fdj,.top-sch-box .sch-txt,.pop-schwrap .btn-back').on('click',function () {
            $('html,body').toggleClass('holding');
            $('.pop-schwrap').toggleClass('on');
            if($('.pop-schwrap').hasClass('on')) {;
                $('.pop-schwrap .sch-input').focus();
            }
        });

    });
</script>

}
